/*
 * 单品部分的商品组件
 * @Author: ljb
 * @Date: 2018-11-13 16:32:49
 * @Last Modified by: kanglin
 * @Last Modified time: 2019-01-30 15:16:35
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    @import '~src/assets/css/common.less';

    .v-component-single-product {
		display: inline-block;
        .product-container {
			background: #ffffff;
            width: 328*@rem-per-px;
            .product-image {
                width: 328*@rem-per-px;
                height: 328*@rem-per-px;
                line-height: 328*@rem-per-px;
                font-size: 0;
                overflow: hidden;
				text-align: center;
				background-color: @background-color;
                img {
					width: 100%;
					vertical-align: middle;
                }
            }
            .product-attr {
                padding: 0 8*@rem-per-px;
            }
            .product-title {
                line-height: 36*@rem-per-px;
                margin: 12*@rem-per-px 0 16*@rem-per-px;
                font-size: 28*@rem-per-px;
                color: rgba(0,0,0,.85);
            }
            .product-price {
                line-height: 44*@rem-per-px;
                font-size: 32*@rem-per-px;
				color: rgba(0,0,0,.85);
				.origin-price {
					font-weight: bold;
				}
                // .unit {
				// 	font-size: 24*@rem-per-px;
				// 	color: @unit-color;
                // }
            }
            .product-evaluate {
                line-height: 28*@rem-per-px;
                font-size: 20*@rem-per-px;
                color: rgba(0,0,0,.45);
                .total-evaluate {
                    margin-right: 16*@rem-per-px;
                }
            }
        }
    }

</style>
<template>
	<div class="v-component-single-product">
		<div class="product-container">
			<!-- 商品图片 -->
			<div class="product-image">
				<img
					v-lazy="productImage"
					alt="img">
			</div>
			<!-- 商品属性 -->
			<div class="product-attr">
				<!-- 商品标题 -->
				<div
					:title="productTitle"
					class="product-title overflow-ellipsis">{{ productTitle }}</div>
				<!-- 商品价格 -->
				<div class="product-price">
					<span
						v-if="leftSymbol"
						class="unit">{{ leftSymbol }}</span>
					<span class="origin-price">{{ productPrice }}</span>
					<span
						v-if="rightSymbol"
						class="unit">{{ rightSymbol }}</span>
				</div>
				<!-- 商品的评价数 -->
				<!-- <div class="product-evaluate">
					<span class="total-evaluate">{{ `${totalEvaluate}条评价` }}</span>
					<span class="praise-rate">{{ praiseRate }}</span>
				</div> -->
			</div>
		</div>
	</div>
</template>

<script>

/**
 * 单品部分的商品组件
 * @vue-prop {string} [productImage=null]	封面图片
 * @vue-prop {String} [productTitle='']	商品标题
 * @vue-prop {String | Number} [productPrice=''] 商品价格
 * @vue-prop {String | Number} linePrice 划线价
 * @vue-prop {string} [leftSymbol=''] 货币符号
 * @vue-prop {string} [rightSymbol='] 货币符号
 */
export default {
	name: 'SingleProduct',
	props: {
		productImage: {
			type: String,
			default() {
				return null;
			},
		},
		productTitle: {
			type: String,
			default() {
				return '';
			},
		},
		productPrice: {
			type: [String, Number],
			default() {
				return 300;
			},
		},
		leftSymbol: {
			type: String,
			default() {
				return '';
			},
		},
		rightSymbol: {
			type: String,
			default() {
				return '';
			},
		},
	},
	data() {
		return {
		};
	},
	methods: {

	},
};
</script>
